$(function (){
    //将全部特征呈现在屏幕上
    $.ajax({
        url:"http://localhost:8080/index.html/getAllFeatures",
        type:"POST",
        dataType:"json",
        success:function (response){
            console.log(response);
            const allFeatures = response["allFeatures"];
            //将元素添加到页面上
            for(let i in allFeatures){
                const feature = allFeatures[i];
                $("#selectArea").append("<button class='selectButton'" +
                    " value="+feature['fid']+">"
                    +feature['feature']
                   +"</button>");
            }
            //特征选择按钮点击事件
            //参数为1表示需要将按钮添加到页面上，为0则不需要
            const flag = 1;
            selectSubmit(1);
        }

    })



    function  selectSubmit(flag){

        $('.selectButton').click(function (){
            console.log($(this).val());
            const featureOffer = $(this).val();
            $.ajax({
                url: "http://localhost:8080/index.html/featureServlet?featureOffer="+featureOffer,
                type: "GET",
                dataType:"json",
                success:function (response){
                    console.log("请求发送成功");
                    console.log(response);
                    if(flag === 1){
                        //修改flag的值
                        flag = 0;
                        //将元素添加到页面上
                        const allFeatures = response["animalFeatureList"];
                        for(let i in allFeatures){
                            const feature = allFeatures[i];
                            $("#middleArea").append("<button class='selectButton'" +
                                " value="+feature['fid']+">"
                                +feature['feature']
                                +"</button>");
                        }
                    }
                    //特征集加入到页面上
                    //先清空
                    $('#resultArea').empty();
                    const ownFeatures = response["features"];
                    for(let i in ownFeatures){
                        const onefeature = ownFeatures[i];
                        $('#resultArea').append("<div class='featureBlock'>"+
                            onefeature['feature']+
                            "</div>"
                        )
                    }

                    //结果加入页面
                    //$('#downArea')
                    const animal = response['animal'];
                    if(animal != null){
                        $('#downArea').append("<div class='featureBlock'>"+
                            animal['animal']+
                            "</div>")
                    }

                }
            })

        });

    }

    function addFuture(){

    }



})